<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<script src="./vue.js"></script>
<script src="./vue-router.js"></script>
<style>
  html,
  body {
    margin: 0;
    padding: 0;
  }

  h1 {
    margin: 0;
    padding: 0;
    font-size: 16px;
  }

  .header {
    background-color: lightblue;
    height: 80px;
  }

  .container {
    display: flex;
    height: 600px;
  }

  .sidebar {
    background-color: lightgreen;
    flex: 2;
  }

  .main {
    background-color: lightpink;
    flex: 8;
  }
</style>

<body>
  <div id="app">
    <!-- 默认视图 -->
    <router-view></router-view>
    <div class="container">
      <!-- 命名视图 -->
      <router-view name="left"></router-view>
      <router-view name="main"></router-view>
    </div>
  </div>


  <script>
    let header = {
      template: '<h1 class="header">header头部</h1>'
    }
    let sidebar = {
      template: '<h1 class="sidebar">sidebar</h1>'
    }
    let mainBox = {
      template: '<h1 class="main">mainBox头部</h1>'
    }


    let router = new VueRouter({
      routes: [{
        path: "/",
        // 将特定的组件(页面)展示在特定的视图当中
        components: {
          "default": header,
          "left": sidebar,
          "main": mainBox,
        }
      }]
    })

    var vm = new Vue({
      el: "#app",
      router
    })
  </script>
</body>

</html>